<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Layout 布局</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="../static/js/vue.global.js"></script> -->
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style lang="scss">
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
}
.bg-purple-dark {
	background: #99a9bf;
}
.bg-purple {
	background: #d3dce6;
}
.bg-purple-light {
	background: #e5e9f2;
}
.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
.row-bg {
	padding: 10px 0;
	background-color: #f9fafc;
}
body{margin: 0;}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础布局</el-divider><!-- =============================================================== -->
	<p class="desc">使用列创建基础网格布局。通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。</p>
	<el-row>
		<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
	</el-row>
	<el-row>
		<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>
	<el-row>
		<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>
	<el-row>
		<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>
	
	<el-divider content-position="left">分栏间隔</el-divider><!-- =============================================================== -->
	<p class="desc">支持列间距。</p>
	<p class="desc">行提供 gutter 属性来指定列之间的间距，其默认值为0。</p>
	<el-row :gutter="20">
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	
	<el-divider content-position="left">混合布局</el-divider><!-- =============================================================== -->
	<p class="desc">通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。</p>
	<el-row :gutter="20">
		<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row :gutter="20">
		<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row :gutter="20">
		<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	
	<el-divider content-position="left">列偏移</el-divider><!-- =============================================================== -->
	<p class="desc">您可以指定列偏移量。</p>
	<p class="desc">通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。</p>
	<el-row :gutter="20">
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row :gutter="20">
		<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row :gutter="20">
		<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	
	<el-divider content-position="left">对齐方式</el-divider><!-- =============================================================== -->
	<p class="desc">默认使用 flex 布局来对分栏进行灵活的对齐。</p>
	<p class="desc">您可以通过justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。</p>
	<el-row class="row-bg">
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row class="row-bg" justify="center">
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row class="row-bg" justify="end">
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row class="row-bg" justify="space-between">
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row class="row-bg" justify="space-around">
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	
	<el-divider content-position="left">响应式布局</el-divider><!-- =============================================================== -->
	<p class="desc">参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。</p>
	<el-row :gutter="10">
		<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
		<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
		<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
		<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			msg: 'Hello Vue!!'
		}
	},
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>